<template>
  <div>
    <h2>当前点击次数为{{ count }}次</h2>
    <el-select v-model="selectNumber" placeholder="请选择" class="my-select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="increment(selectNumber)" type="primary">+</el-button>
    <el-button @click="decrement">-</el-button>
    <el-button @click="incrementIfOdd">奇数+</el-button>
    <el-button @click="incrementAsync">异步+</el-button>
    <h3 v-show="isFlag">hhhh</h3>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "Count",
  data() {
    return {
      // count: 0,
      selectNumber: 1,
      options: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
      ],
      isFlag: false,
    };
  },
  props: ["count", "increment"],
  methods: {
    // increment() {
    //   this.props.count += this.selectNumber;
    // },
    decrement() {
      this.count -= this.selectNumber;
      this.$emit("hhh", "我的心真的受伤了了");
    },
    incrementIfOdd() {
      if (this.count % 2) {
        this.count += this.selectNumber;
      }
    },
    incrementAsync() {
      setTimeout(() => {
        this.count += this.selectNumber;
      }, 1000);
    },
  },
  mounted() {
    pubsub.subscribe("hhh", (_, data) => {
      console.log(`data`, data);
    });
  },
};
</script>

<style lang="less" scoped>
.my-select {
  width: 66px;
  margin-right: 10px;
}
</style>